import { useEffect, useState } from "react"
import {
  saveLocalStorage,
  changeTheme,
  type ThemeType,
} from "@/theme"
import { Switch } from "antd"
const Index = () => {
  const [isDark, setIsDark] = useState(() => {
    const save = localStorage.getItem("theme")
    return (
      save === "dark" ||
      (!save && window.matchMedia("(prefers-color-scheme: dark)").matches)
    )
  })
  useEffect(() => {
    const theme: ThemeType = isDark ? "dark" : "light"
    saveLocalStorage(theme)
    changeTheme(theme)
  }, [isDark])
  return (
    <div>
      <Switch
        onChange={() => setIsDark(!isDark)}
        checkedChildren="日"
        unCheckedChildren="月"
        defaultChecked
      />
    </div>
  )
}

export default Index
